<template>
	<wxs src="../wxs/utils.wxs" module="utils" />

	<view class="custom-class" :class=" [utils.bem('switch', { on: value === activeValue, disabled })] " 
	:style="[{'font-size': size }, {(checked ? activeColor : inactiveColor) ? 'background-color: ' + (checked ? activeColor : inactiveColor ) : ''}]"
	 @tap="onClick">
		<view class="van-switch__node node-class">
			<van-loading v-if=" loading " size="50%" custom-class="van-switch__loading" />
		</view>
	</view>

</template>

<script>
	import VantComponent from '../common/component'
	export default {
		field: true,
		classes: ['node-class'],
		props: {
			checked: null,
			loading: Boolean,
			disabled: Boolean,
			activeColor: String,
			inactiveColor: String,
			size: {
				type: String,
				value: '30px'
			},
			activeValue: {
				type: null,
				value: true
			},
			inactiveValue: {
				type: null,
				value: false
			}
		},
		watch: {
			checked(value) {
				this.set({
					value
				});
			}
		},
		created() {
			this.set({
				value: this.data.checked
			});
		},
		methods: {
			onClick() {
				const {
					activeValue,
					inactiveValue
				} = this.data;
				if (!this.data.disabled && !this.data.loading) {
					const checked = this.data.checked === activeValue;
					const value = checked ? inactiveValue : activeValue;
					this.$emit('input', value);
					this.$emit('change', value);
				}
			}
		}
	}
</script>

<style>
	@import '../common/index.wxss';

	.van-switch {
		display: inline-block;
		position: relative;
		width: 2em;
		height: 1em;
		border: 1px solid rgba(0, 0, 0, .1);
		border-radius: 1em;
		box-sizing: content-box;
		background-color: #fff;
		transition: background-color .3s
	}

	.van-switch__node {
		top: 0;
		left: 0;
		position: absolute;
		border-radius: 100%;
		width: 1em;
		height: 1em;
		z-index: 1;
		transition: .3s;
		box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
		background-color: #fff
	}

	.van-switch__loading {
		top: 25%;
		left: 25%;
		position: absolute !important
	}

	.van-switch--on {
		background-color: #1989fa
	}

	.van-switch--on .van-switch__node {
		-webkit-transform: translateX(1em);
		transform: translateX(1em)
	}

	.van-switch--disabled {
		opacity: .4
	}
</style>
